<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from 'vue'

let sum = ref(0)
function add() {
  sum.value += 1
}

/**
 * - Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
 *      - beforeCreate===> setup()
 *      - created=======> setup()
 *      - beforeMount ===>onBeforeMount
 *      - mounted=======>onMounted
 *      - beforeUpdate===>onBeforeUpdate
 *      - updated =======>onUpdated
 *      - beforeUnmount ==>onBeforeUnmount
 *      - unmounted =====>onUnmounted
 * 其中，beforeCreate、created没有提供组合式api，其中setup就相当于是beforeCreate、created，这两种方式生命周期钩子。
 */
// Vue3最大的特点就是组合式api，使用组合式api向setup里面写声明周期钩子。
// 通过组合式API的形式去使用生命周期钩子。
// 输出创建beforeCreate、created，在vue3里面都是使用setup()替换了。
console.log('子组件 创建，beforeCreate===> setup()，created=======> setup()')

onBeforeMount(() => {
  console.log('---子组件 Vue3生命周期 1、挂载之前：onBeforeMount---')
})
onMounted(() => {
  console.log('---子组件 Vue3生命周期 2、挂载完毕：onMounted---')
})
onBeforeUpdate(() => {
  console.log('---子组件 Vue3生命周期 3、更新之前：onBeforeUpdate---')
})
onUpdated(() => {
  console.log('---子组件 Vue3生命周期 4、更新完毕：onUpdated---')
})
// Vue3生命周期里面的是，卸载之前
onBeforeUnmount(() => {
  console.log('---子组件 Vue3生命周期 5、卸载之前：onBeforeUnmount---')
})
// Vue3生命周期里面的是，卸载完毕
onUnmounted(() => {
  console.log('---子组件 Vue3生命周期 6、卸载完毕：onUnmounted---')
})
</script>

<template>
  <div class="person">
    <h1>sum值：{{ sum }}</h1>
    <button @click="add">点我sum+1</button>
  </div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
